<template>
  <div class="main">
    <head_top>
      <div slot="logo" class="logo"><img class="img-responsive" src="../../image/con_02.png" alt=""></div>
      <div slot="login" class="login">
        <div @click="$router.push({path: '/login'})">登录</div>
        /
        <div @click="$router.push({path: '/register'})">注册</div>
      </div>
    </head_top>
    <div class="info-wrap">
      <div class="loading">
        <mt-spinner :type="0" :size="50" color="#2aaa6d"></mt-spinner>
      </div>
      <mt-cell class="text-left" title="我的身份证" is-link>
        <img slot="icon" src="../../image/con_02.png" width="24" height="24">
      </mt-cell>
      <mt-cell class="text-left" title="我的手机" is-link>
        <img slot="icon" src="../../image/con_02.png" width="24" height="24">
      </mt-cell>
      <mt-cell class="text-left" title="我的钥匙" is-link>
        <img slot="icon" src="../../image/con_02.png" width="24" height="24">
      </mt-cell>
      <mt-cell class="text-left" title="我的钱包" is-link>
        <img slot="icon" src="../../image/con_02.png" width="24" height="24">
      </mt-cell>
      <mt-cell class="text-left" title="我的全部" is-link>
        <img slot="icon" src="../../image/con_02.png" width="24" height="24">
      </mt-cell>
      <mt-cell class="text-left" title="设置" is-link>
        <img slot="icon" src="../../image/con_02.png" width="24" height="24">
      </mt-cell>
    </div>
    <transition name="fade" mode="out-in"><router-view class="info-contariner"></router-view></transition>
  </div>
</template>

<script>
import head_top from '../header'
export default {
  name: 'hello',
  data () {
    return {
      items: [{text: 'Rahanna'}]
    }
  },
  components: {
    head_top
  },

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .main {
    margin-top: 50px;
  }
  .login {
    float: right;
    margin-right: 10px;
    color: white;
    display: flex;
    font-size: 14px;
  }
  .logo {
    float: left;
    width: 25px;
    margin: 12px 0 0 8px;
  }
  .loading {
    width: 100px;
    height: 100px;
    display: none;
    justify-content: center;
    align-items: center;
    position: absolute;
    z-index: 999;
    left: 50%;
    top: 50%;
    margin: -50px 0 0 -50px;
  }
  .loading.show{
    display: flex;
  }
  .info-wrap {
    width: 100%;
    height: 100%;
  }
  .text-left{
    text-align: left;
    text-decoration: none;
  }
</style>
